<template>
  <div class="map" ref="baiduRef" :style="{ height: Height }"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";

const baiduRef = ref();
const map = ref();
const point = ref();
const makers = ref([]); //存储轨迹点
const polyline = ref(); //存储折线
const props = defineProps({
  height: {
    type: [String, Number],
    default: "300px", // 设置默认高度
  },
});
const Height = props.height;
console.log(Height);
function initMap(lng = 121.41055305496216, lat = 37.62180370159856) {
  map.value = new BMapGL.Map(baiduRef.value);
  point.value = new BMapGL.Point(lng, lat);

  map.value.centerAndZoom(point.value, 5);
  map.value.enableScrollWheelZoom(true); //滚轮缩放
}
const initMapHeight = () => {
  var main = document.querySelector(".map");
  main.style.height = window.innerHeight + "px";
};
onMounted(() => {
  initMap();
  initMapHeight();
});
</script>
<style scoped>
.map {
  width: 59.4vw;
  margin-left: 0.5vw;
  margin-top: 0.7vh;
  height: 700px;
}

:deep(.anchorBL) {
  display: none !important;
}

[class=" anchorBL"] {
  display: none;
}
:deep(.bmap-container) {
  height: 700px;
}
[class="bmap-container"] {
  height: 700px;
}
</style>
